<template>
  <Transition name="slide-left">
    <div v-if="showWallet" class="wallet">
      <PageHead title="钱包" :border-bottom="false" @back="showWallet = false">
        <span class="text-333">账单</span>
      </PageHead>
      <section class="pl-16">
        <List title="零钱" :icon="moneyPng" @click="recharge">
          <span> ￥{{ store.master.pocketMoney.toFixed(2) }} </span>
        </List>
        <List :icon="zuanshiPng" title="零钱通" tag="收益率1.67%">
          <input type="text" value="￥0.00" class="text-right" />
        </List>
        <List
          v-for="(item, key) in list"
          :key="key"
          :icon="item.icon"
          :title="item.title"
        >
        </List>
      </section>

      <section>
        <List title="支付分" :icon="zff"></List>
      </section>

      <section>
        <List title="消费者保护" :icon="xfzbh"></List>
      </section>

      <section>
        <List title="身份信息" :icon="idCard"></List>
        <List title="支付设置" :icon="system"></List>
      </section>

      <div class="help">帮助中心</div>

      <PocketMoney></PocketMoney>
      <Recharge></Recharge>
      <Comfirm></Comfirm>
    </div>
  </Transition>
</template>

<script setup lang="ts">
  import { Transition, computed } from 'vue';
  import PageHead from '@/views/components/page-head/PageHead.vue';
  import List from '@/views/components/list/List.vue';

  import system from '@/assets/images/system.png';
  import { getUserStore } from '@/store/user/utils';
  import { showLoading } from '@/views/components/loading/loading';
  import { getRandomInt } from '@/utils/utils';
  import { showWallet } from './wallet';

  import fenfu from '../assets/fenfu.png';
  import moneyPng from '../assets/money.png';
  import zuanshiPng from '../assets/zuanshi.png';
  import fenqi from '../assets/fenqi.png';
  import bankCard from '../assets/bank-card.png';
  import zff from '../assets/zff.png';
  import xfzbh from '../assets/xfzbh.png';
  import idCard from '../assets/id-card.png';
  import PocketMoney from './pocket-money/PocketMoney.vue';
  import { showPocketMoney } from './pocket-money/pocket-money';
  import Recharge from './recharge/Recharge.vue';
  import Comfirm from './recharge/comfirm/Comfirm.vue';

  const recharge = () => {
    showLoading(
      {
        show: true,
        type: 'loading',
      },
      () => {
        showPocketMoney.value = true;
      }
    );
  };

  const store = computed(() => {
    return getUserStore();
  });
  const list = [
    {
      title: '分付',
      icon: fenfu,
    },
    {
      title: '分期',
      icon: fenqi,
    },
    {
      title: '银行卡',
      icon: bankCard,
    },
  ];
</script>

<style lang="scss" scoped>
  .wallet {
    position: absolute;
    left: 0;
    top: 0%;
    height: 100vh;
    width: 100%;
    background-color: var(--background-color);
    section {
      background-color: white;
      padding-left: 16px;
      margin-bottom: 8px;
    }

    .help {
      position: absolute;
      transform: translateX(-50%);
      color: #677399;
      top: 92%;
      left: 50%;
      font-weight: bold;
    }
  }
</style>
./pocket-money/recharge
